<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
		<title>游戏内页</title>
	</head>
	<body>
		<div class="web">
			<header>
				<nav>
					<i class="iconfont icon-weibo"></i>
					<div class="navLeft wow animate__rubberBand">
						<a href="index.html">
							<img src="../img/sugarLogo.png">
						</a>
					</div>
					<div class="navRight">
						<div class="box">
							<div class="line1"></div>
							<div class="line2"></div>
							<a href="index.html">首页</a>
							<a href="index.html">home</a>
						</div>
						<div class="box">
							<div class="line1"></div>
							<div class="line2"></div>
							<a href="game.html">游戏</a>
							<a href="game.html">game</a>
						</div>
						<div class="box">
							<div class="line1"></div>
							<div class="line2"></div>
							<a href="case.html">案例</a>
							<a href="case.html">Case</a>
						</div>
						<div class="box">
							<div class="line1"></div>
							<div class="line2"></div>
							<a href="personal.html">关于我们</a>
							<a href="personal.html">About us</a>
						</div>
					</div>
				</nav>
			</header>
			<main>
				<section class="introduce wow animate__lightSpeedInRight">
					<div class="imgBox">
						<img src="../img/gameCR.png">
					</div>
					<h2>宝石迷阵</h2>
					<p>《宝石迷阵》与暴司时候发行的游的的戏《星际争霸》一样，是一款成功的即时战略游戏。
						游戏时战略游戏所要素：建设基地和指挥指挥战斗。游戏的操作方式也，秉承了星霸优点，
						并对星际争霸中一些繁琐的操作进行了简化。</p>
					<div class="btn">
						<button>收藏</button>
						<button>制作游戏</button>
						<button>购买</button>
					</div>
				</section>
				<section class="detail">
					<div class="deBox wow animate__fadeInUpBig">
						<div class="box">
							<div class="circle">
								<i class="iconfont icon-shijian"></i>
							</div>
							<h2>时间</h2>
							<p>2014-07-09</p>
						</div>
						<div class="box">
							<div class="circle">
								<i class="iconfont icon-jiage"></i>
							</div>
							<h2>价格</h2>
							<p>2333</p>
						</div>
						<div class="box">
							<div class="circle">
								<i class="iconfont icon-wujiaoxing"></i>
							</div>
							<h2>使用次数</h2>
							<p>20</p>
						</div>
						<div class="box">
							<div class="circle">
								<i class="iconfont icon-wenjian"></i>
							</div>
							<h2>大小</h2>
							<p>1034KB</p>
						</div>
					</div>
					<div class="imgP wow animate__fadeInTopLeft">
						<img src="../img/gamePhone.png">
					</div>
				</section>
				<section class="use">
					<div class="title wow animate__flipInX">
						<div class="line">
							<img src="../img/gameCR.png">
						</div>
						<h2>使用方法</h2>
						<h3>USE METHODS</h3>
					</div>
					<div class="step wow animate__fadeInLeft">
						<div class="step1">
							<div class="imgBox">
								<img src="../img/homeStep.png">
							</div>
							<h2>STEP ONE</h2>
							<h3>选择一个游戏，换图</h3>
						</div>
						<div class="stepArrow1">
							<img src="../img/homeArrowL.png">
						</div>
						<div class="step2">
							<div class="imgBox">
								<img src="../img/homeStep2.png">
							</div>
							<h2>THE SECOND STEP</h2>
							<h3>选择一个游戏，换图</h3>
						</div>
						<div class="stepArrow2">
							<img src="../img/homeArrowL.png">
						</div>
						<div class="step3">
							<div class="imgBox">
								<img src="../img/homeStep3.png">
							</div>
							<h2>THE THIRD STEP</h2>
							<h3>选择一个游戏，换图</h3>
						</div>
					</div>
				</section>
			</main>
			<footer>
				<p>COPYRIGHT © 2014 PANGTANG. ALL RIGHTS RESERVED. 版权所有</p>
			</footer>
		</div>
	</body>

	<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
	<script type="text/javascript" src="http://www.jeendo.com/script/wow/wow.min2.js"></script>
</html>
